<template>
  <div class="home">
    <div class="search">
      <input type="text" placeholder="搜索商品/店铺" />
    </div>
    <div class="swiper">
      <img
        src="https://img1.baidu.com/it/u=2938985973,3795388857&fm=253&fmt=auto&app=138&f=JPEG?w=1079&h=500"
        alt=""
      />
    </div>
    <div class="List">
      <div class="listInfo">
        <h3>猜你喜欢</h3>
        <div class="listInfo1">
          <span
            v-for="(item, index) in sortList"
            :key="index"
            >{{ item }}</span
          >
        </div>
        <div class="listInfo2">
          <span v-for="(item, index) in titleList" :key="index">{{
            item
          }}</span>
        </div>
        <div class="goods" v-for="(item, index) in shopList" :key="index">
          <div class="imgBox">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="goodsInfo">
            <div class="name">{{ item.name }}</div>
            <div class="score">
              <span>{{ item.wmPoiScore }}</span
              >&nbsp;&nbsp;
              <span>{{ item.monthSalesTip }}</span>
            </div>
            <div class="price">
              <span>{{ item.minPriceTip }}</span
              >&nbsp;&nbsp;
              <span>{{ item.shippingFeeTip }}</span>
              <span>{{ item.distance }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {shopList} from '../../utils/api'
export default {
    data(){
        return{
            currentIndex:0,
            sortList:["综合排序","距离最近","销量最高","筛选"],
            titleList:["年货节热卖","津贴联盟","满减优惠","品质联盟"],
            shopList:[]
        }
    },
    mounted(){
    shopList().then((res)=>{
      this.shopList = res.data.list
    })
  },
    
};
</script>

<style>
.search {
  width: 100%;
  background-color: cornflowerblue;
  height: 100px;
}
.search > input {
  margin: 50px 10px 10px;
  border: none;
  outline: none;
  width: 90%;
  background-color: #f5f5f5;
  height: 36px;
  border-radius: 20px;
  padding: 4px 10px;
  box-sizing: border-box;
  text-align: center;
}
.swiper{
    margin: 10px;
}
.swiper img{
    width: 100%;
    border-radius: 10px;
}
.List{
    margin-bottom: 60px;
}
.listInfo{
    margin: 10px;
}
.listInfo>.listInfo1{
    margin: 16px 0px;
    display: flex;
    justify-content: space-between;
}
.listInfo>.listInfo2{
    display: flex;
    justify-content: space-between;
}
.listInfo>.listInfo2>span{
    display: inline-block;
    padding: 6px 6px;
    background-color: #b0b0b0;
    font-size: 14px;
    border-radius: 4px;
}
.listInfo>.goods{
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
}
.listInfo>.goods>.imgBox{
    width: 30%;
    margin-right: 10px;
    overflow: hidden;
}
.listInfo>.goods>.imgBox>img{
    width: 100%;
    border-radius: 4px;
}
.listInfo>.goods>.goodsInfo{
    width: 66%;
}
.listInfo>.goods>.goodsInfo>.name{
    font-weight: bold;
}
.listInfo>.goods>.goodsInfo>.score{
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 6px;
}
.listInfo>.goods>.goodsInfo>.price{
    font-size: 14px;
}
.listInfo>.goods>.goodsInfo>.price>span:nth-child(3){
    margin-left: 40px;
}

</style>